<template>
  <div class="workbench-wrapper">
    <container-box :metaTitle="routeMeta.title || ''">
      <div slot="container">
        <div class="baseTable">
          <div class="header">
            <span class="headName">模块标签</span>
          </div>
          <div class="searchBox">
            <div class="search">
              <span class="labelbox">
                筛选条件
                <p style="display:inline-block; color:red;">*</p>
              </span>
              <mds-select :value="demoValue1" clearable style="width: 259px;" placeholder="请选择" @change="handleChange">
                <mds-option value="选项一">选项一</mds-option>
                <mds-option value="选项二">选项二</mds-option>
              </mds-select>
            </div>
            <div class="search">
              <span class="labelbox">筛选条件</span>
              <mds-input v-model="inputData2" placeholder="请输入" size="default" style="width: 259px;"></mds-input>
            </div>
            <div class="btBox">
              <div style="height:36px;">
                <mds-button style="margin-right:8px;width:80px;" type="primary">查 询</mds-button>
                <mds-button style="margin-right:8px;width:80px;">重 置</mds-button>
              </div>
            </div>
          </div>
          <div class="empBar">
            <span class="line"></span>
          </div>
          <div class="chatBox">
            <div class="chat" style="width:100%;">
              <div class="data-body_tables" id="Data-body_tables"></div>
            </div>
          </div>
          <div class="tableBox">
            <mds-table
              style="background:rgb(255,255,255,1);padding:0 24px 0 24px;"
              :columns="tableColumn"
              :data="tableList"
              border
            ></mds-table>
            <div class="paginationBox">
              <mds-pagination :total="600" :current="6" showQuickJumper></mds-pagination>
            </div>
          </div>
          <div class="tableBox">
            <mds-table
              style="background:rgb(255,255,255,1);padding:0 24px 0 24px;"
              :columns="tableColumn1"
              :data="tableList1"
              border
              @on-selection-change="selectionChange"
            ></mds-table>
            <div class="paginationBox">
              <mds-pagination :total="600" :current="6" showQuickJumper></mds-pagination>
            </div>
          </div>
        </div>
      </div>
      <mds-card slot="info" class="mds-card" style="width: 280px" :loading="true">
        <div slot="header">
          <span>{{ routeMeta.title || '' }}</span>
        </div>
        <div v-for="o in 4" :key="o" class="text item">{{'列表内容 ' + o }}</div>
      </mds-card>
    </container-box>
  </div>
</template>

<script>
import ContainerBox from '@/components/ContainerBox'
import echarts from 'echarts'
export default {
  data() {
    return {
      demoValue1: '',
      demoValue2: '',
      demoValue3: '',
      inputData2: '',
      DataNum: 10,
      time: new Date(),
      tableList: [
        {
          id: '123456',
          description: '这是一个文字描述的信息',
          updaterTime: '2020-02-02 13:00:33 ',
          status: '成功',
          pace: 50,
          price: '￥1666.00',
          age: 12
        },
        {
          id: '123456',

          description: '这是一个文字描述的信息',
          updaterTime: '2020-02-02 13:00:33 ',
          status: '成功',
          price: '￥1666.00',
          age: 15
        },
        {
          id: '123456',
          description: '这是一个文字描述的信息',
          updaterTime: '2020-02-02 13:00:33 ',
          status: '成功',
          price: '￥1666.00',
          age: 20
        },
        {
          id: '123456',

          description: '这是一个文字描述的信息',
          updaterTime: '2020-02-02 13:00:33 ',
          status: '成功',
          price: '￥1666.00',
          age: 25
        },
        {
          id: '123456',

          description: '这是一个文字描述的信息',
          updaterTime: '2020-02-02 13:00:33 ',
          status: '成功',
          price: '￥1666.00',
          age: 30
        }
      ],
      tableColumn: [
        {
          title: '卡片ID',
          align: 'center',
          key: 'id'
        },
        {
          title: '描述',
          key: 'description',
          width: 200
        },
        {
          title: '更新时间',
          key: 'updaterTime',
          sortable: true,
          width: 200,
          scrtMethod(column) {
            console.log(column, '触发')
          }
        },
        {
          title: '状态',
          key: 'status',
          width: 100,
          render: (h, { row }) => {
            return h('div', [
              h('div', {
                class: {
                  success: row.status === '成功',
                  error: row.status === '失败',
                  warn: row.warn === '警告'
                }
              }),
              h(
                'span',
                {
                  style: {
                    height: '100%',
                    width: '100%'
                  }
                },
                row.status
              )
            ])
          }
        },
        {
          title: '进度',
          key: 'pace',
          width: 100,
          render: (h, { row }) => {
            return h('div', [
              h('mds-progress', {
                props: {
                  percentage: row.pace
                  // showText: true
                }
              })
            ])
          }
        },
        //  <mds-progress :percentage="0" :showText="true"></mds-progress>
        {
          title: '价格',
          key: 'price',
          width: 100,
          sortable: true,
          scrtMethod(column) {
            console.log(column, '触发')
          }
        },
        {
          title: '操作',
          key: 'action',
          width: 400,
          align: 'center',
          render: h => {
            return h('div', [
              h(
                'button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px',
                    width: '61px',
                    height: '17px',
                    fontSize: '12px',
                    fontFamily: 'PingFangSC',
                    fontWeight: 400,
                    color: 'rgba(3, 102, 255, 1)',
                    lineHeight: '17px',
                    border: 0,
                    outline: 'none',
                    background: 'none'
                  },
                  on: {
                    click: () => {
                      alert('编辑')
                    }
                  }
                },
                '编辑'
              ),
              h(
                'button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px',
                    width: '61px',
                    height: '17px',
                    fontSize: '12px',
                    fontFamily: 'PingFangSC',
                    fontWeight: 400,
                    color: 'rgba(3, 102, 255, 1)',
                    lineHeight: '17px',
                    border: 0,
                    outline: 'none',
                    background: 'none'
                  },
                  on: {
                    click: () => {
                      alert('删除')
                    }
                  }
                },
                '删除'
              ),
              h(
                'button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px',
                    width: '61px',
                    height: '17px',
                    fontSize: '12px',
                    fontFamily: 'PingFangSC',
                    fontWeight: 400,
                    color: 'rgba(3, 102, 255, 1)',
                    lineHeight: '17px',
                    border: 0,
                    outline: 'none',
                    background: 'none'
                  },
                  on: {
                    click: () => {
                      alert('预览')
                    }
                  }
                },
                '预览'
              ),
              h(
                'button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px',
                    width: '61px',
                    height: '17px',
                    fontSize: '12px',
                    fontFamily: 'PingFangSC',
                    fontWeight: 400,
                    color: 'rgba(3, 102, 255, 1)',
                    lineHeight: '17px',
                    border: 0,
                    outline: 'none',
                    background: 'none'
                  },
                  on: {
                    click: () => {
                      alert('测试')
                    }
                  }
                },
                '测试'
              )
            ])
          }
        }
      ],
      tableList1: [
        {
          id: '123456',
          description: '这是一个文字描述的信息',
          updaterTime: '2020-02-02 13:00:33 ',
          status: '成功',
          price: '￥1666.00',
          age: 12
        },
        {
          id: '123456',

          description: '这是一个文字描述的信息',
          updaterTime: '2020-02-02 13:00:33 ',
          status: '成功',
          price: '￥1666.00',
          age: 15
        },
        {
          id: '123456',
          description: '这是一个文字描述的信息',
          updaterTime: '2020-02-02 13:00:33 ',
          status: '成功',
          price: '￥1666.00',
          age: 20
        },
        {
          id: '123456',

          description: '这是一个文字描述的信息',
          updaterTime: '2020-02-02 13:00:33 ',
          status: '成功',
          price: '￥1666.00',
          age: 25
        },
        {
          id: '123456',

          description: '这是一个文字描述的信息',
          updaterTime: '2020-02-02 13:00:33 ',
          status: '成功',
          price: '￥1666.00',
          age: 30
        }
      ],
      tableColumn1: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
          fixed: 'left'
        },
        {
          title: '卡片ID',
          align: 'center',
          key: 'id'
        },
        {
          title: '描述',
          key: 'description',
          width: 200
        },
        {
          title: '更新时间',
          key: 'updaterTime',
          sortable: true,
          width: 200,
          scrtMethod(column) {
            console.log(column, '触发')
          }
        },
        {
          title: '状态',
          key: 'status',
          width: 100,
          render: (h, { row }) => {
            return h('div', [
              h('div', {
                class: {
                  success: row.status === '成功',
                  error: row.status === '失败',
                  warn: row.warn === '警告'
                }
              }),
              h(
                'span',
                {
                  style: {
                    height: '100%',
                    width: '100%'
                  }
                },
                row.status
              )
            ])
          }
        },
        {
          title: '价格',
          key: 'price',
          width: 100,
          sortable: true,
          scrtMethod(column) {
            console.log(column, '触发')
          }
        },
        {
          title: '操作',
          key: 'action',
          width: 400,
          align: 'center',
          fixed: 'right',
          render: h => {
            return h('div', [
              h(
                'button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px',
                    width: '61px',
                    height: '17px',
                    fontSize: '12px',
                    fontFamily: 'PingFangSC',
                    fontWeight: 400,
                    color: 'rgba(3, 102, 255, 1)',
                    lineHeight: '17px',
                    border: 0,
                    outline: 'none',
                    background: 'none'
                  },
                  on: {
                    click: () => {
                      alert('编辑')
                    }
                  }
                },
                '编辑'
              ),
              h(
                'button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px',
                    width: '61px',
                    height: '17px',
                    fontSize: '12px',
                    fontFamily: 'PingFangSC',
                    fontWeight: 400,
                    color: 'rgba(3, 102, 255, 1)',
                    lineHeight: '17px',
                    border: 0,
                    outline: 'none',
                    background: 'none'
                  },
                  on: {
                    click: () => {
                      alert('删除')
                    }
                  }
                },
                '删除'
              ),
              h(
                'button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px',
                    width: '61px',
                    height: '17px',
                    fontSize: '12px',
                    fontFamily: 'PingFangSC',
                    fontWeight: 400,
                    color: 'rgba(3, 102, 255, 1)',
                    lineHeight: '17px',
                    border: 0,
                    outline: 'none',
                    background: 'none'
                  },
                  on: {
                    click: () => {
                      alert('预览')
                    }
                  }
                },
                '预览'
              ),
              h(
                'button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px',
                    width: '61px',
                    height: '17px',
                    fontSize: '12px',
                    fontFamily: 'PingFangSC',
                    fontWeight: 400,
                    color: 'rgba(3, 102, 255, 1)',
                    lineHeight: '17px',
                    border: 0,
                    outline: 'none',
                    background: 'none'
                  },
                  on: {
                    click: () => {
                      alert('测试')
                    }
                  }
                },
                '测试'
              )
            ])
          }
        }
      ],
      chart: null
    }
  },
  mounted() {
    this.initChart2()
  },
  components: {
    ContainerBox
  },
  computed: {
    routeMeta() {
      return this.$route.meta || {}
    }
  },
  methods: {
    handleChange() {},
    selectionChange(data) {
      console.log(data, 'user')
    },
    initChart2() {
      this.chart = echarts.init(document.getElementById('Data-body_tables'))
      this.chart.setOption({
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        colors: [
          '#8ec6ad', // 蓝
          '#3F80F2' // 绿
        ],
        legend: {
          //  orient: 'horizontal',
          // left: 'center',
          top: 'bottom',
          // bottom: 10,
          padding: [200, 0, 0, 0],
          data: ['图例1', '图例2']
        },
        // toolbox: {
        //     feature: {
        //         saveAsImage: {}
        //     }
        // },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['1', '2', '3', '4', '5', '6', '7']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '图例1',
            type: 'line',
            stack: '总量',
            lineStyle: {
              normal: {
                color: ['#3F80F2']
              }
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#3F80F2'
                },
                {
                  offset: 1,
                  color: 'rgb(255,255,255)'
                }
              ])
            },
            smooth: true,
            data: [10, 39, 30, 20, 10, 10, 10]
          },
          {
            name: '图例2',
            type: 'line',
            stack: '总量',
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            },
            lineStyle: {
              normal: {
                color: ['#8ec6ad']
              }
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#8ec6ad'
                },
                {
                  offset: 1,
                  color: 'rgb(255,255,255)'
                }
              ])
            },
            smooth: true,
            data: [20, 49, 40, 30, 20, 20, 20]
          }
        ]
      })
    }
  }
}
</script>
<style lang="scss" scope>
.baseTable {
  background: rgba(240, 242, 245, 1);
  width: 100%;
  border-radius: 4px;
  .success {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(0, 186, 0, 1);
    display: inline-block;
    margin-right: 5px;
  }
  .error {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(238, 51, 51, 1);
    display: inline-block;
    margin-right: 5px;
  }
  .warn {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 204, 1, 1);
    display: inline-block;
    margin-right: 5px;
  }
  //    padding: 25px 24px 0 24px;
  .header {
    display: flex;
    background: rgba(255, 255, 255, 1);
    justify-content: flex-start;
    justify-items: center;
    align-items: center;
    height: 56px;
    border-bottom: 1px solid rgba(240, 242, 245, 1);
    .headName {
      display: flex;
      justify-content: center;
      justify-items: center;
      height: 24px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(53, 64, 82, 1);
      line-height: 24px;
      padding-left: 24px;
    }
  }
  .searchBox {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    padding: 24px 24px 24px 24px;
    // border-bottom: 1px solid rgba(216,220,230,1);
    background: rgba(255, 255, 255, 1);
    .search {
      display: flex;
      justify-content: space-around;
      flex-direction: column;
      margin-right: 24px;
      .labelbox {
        display: flex;
        justify-content: flex-start;
        margin-bottom: 8px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(127, 143, 164, 1);
        line-height: 22px;
      }
    }
    .btBox {
      display: flex;
      justify-content: flex-end;
      flex-direction: column;
    }
  }
  .empBar {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 1);
    display: flex;
    justify-content: center;
    flex-direction: column;
    .line {
      height: 1px;
      // width: 100%;
      background: rgba(216, 220, 230, 1);
      margin: 0 24px 0 24px;
    }
  }
  .chatBox {
    display: flex;
    justify-content: center;
    flex-direction: row;
    background: rgba(255, 255, 255, 1);
    padding-bottom: 58px;
    width: 100%;
    .chat {
      width: 100%;
      .data-body_tables {
        width: 100%;
        height: 319px;
      }
    }
    .discription {
      width: 50%;
      display: flex;
      justify-content: flex-start;
      flex-direction: column;
      .distime {
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        .title {
          display: flex;
          justify-content: space-between;
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(53, 64, 82, 1);
          line-height: 22px;
          padding: 24px 0 13px 0;

          .titleicon {
            width: 3px;
            height: 12px;
            background: rgba(3, 100, 255, 1);
            display: inline-block;
            margin-right: 5px;
          }
          .openbtn {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(3, 100, 255, 1);
            line-height: 22px;
            padding-right: 24px;
          }
        }
        .text {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(127, 143, 164, 1);
          line-height: 22px;
        }
      }
    }
  }
  .tableBox {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    .tbbox {
      display: flex;
      justify-content: space-between;
      flex-direction: row;
      padding: 16px 24px 24px 24px;
      background: rgba(255, 255, 255, 1);
      .btnBox {
        display: flex;
        justify-content: space-around;
        flex-direction: row;
      }
      .numBox {
        display: flex;
        justify-content: center;
        flex-direction: row;
        align-items: center;
        p {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(3, 100, 255, 1);
          line-height: 22px;
        }
      }
    }
    .paginationBox {
      display: flex;
      justify-content: center;
      padding: 24px 0;
      background: rgba(255, 255, 255, 1);
    }
  }
}
</style>
